<!-- 分割线组件 -->
<template>
  <view class="divider">
    <view :class="['line', props.dashed ? 'line-dashed' : 'line-solid']" :style="lineStyle" />
    <text v-show="showText" :style="textStyle">{{ text }}</text>
    <view :class="['line', props.dashed ? 'line-dashed' : 'line-solid']" :style="lineStyle" />
  </view>
</template>
<script setup lang="ts">
  import { isEmpty } from '@/utils/is';
  import { computed } from 'vue';

  const props = defineProps({
    text: {
      type: String,
      default: () => '',
    },
    textSize: {
      type: Number,
      default: () => 14,
    },
    textColor: {
      type: String,
      default: () => '#909399',
    },
    dashed: {
      type: Boolean,
      default: () => false,
    },
    lineColor: {
      type: String,
      default: () => '#dcdfe6',
    },
  });

  const lineStyle = computed(() => {
    return {
      borderColor: props.lineColor,
    };
  });

  const textStyle = computed(() => {
    return {
      fontSize: props.textSize,
      color: props.textColor,
    };
  });

  const showText = computed(() => {
    return !isEmpty(props.text);
  });
</script>
<style lang="scss">
  .divider {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 30rpx 0;

    text {
      margin: 0 30rpx;
    }
  }
  .line {
    /* #ifndef APP-NVUE */
    vertical-align: middle;
    /* #endif */
    flex: 1;
    margin: '10rpx';
    width: '100%';
    transform: 'scaleY(0.5)';
  }

  .line-dashed {
    border-bottom: 1px dashed;
  }

  .line-solid {
    border-bottom: 1px solid;
  }
</style>
